<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>工单管理 - MES系统</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body>
    <div class="container">
        <!-- Header -->
        <header class="header">
            <h1><i class="fas fa-clipboard-list"></i> 工单管理</h1>
            <div class="user-info">
                <span id="currentTime"></span>
                <a href="index.html" class="btn btn-secondary">
                    <i class="fas fa-home"></i> 返回主页
                </a>
            </div>
        </header>

        <!-- Navigation -->
        <nav class="sidebar">
            <ul class="nav-menu">
                <li class="nav-item">
                    <a href="dashboard.html">
                        <i class="fas fa-tachometer-alt"></i>
                        <span>仪表盘</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a href="products.html">
                        <i class="fas fa-box"></i>
                        <span>产品管理</span>
                    </a>
                </li>
                <li class="nav-item active">
                    <i class="fas fa-clipboard-list"></i>
                    <span>工单管理</span>
                </li>
                <li class="nav-item">
                    <a href="production-records.html">
                        <i class="fas fa-cogs"></i>
                        <span>生产记录</span>
                    </a>
                </li>
            </ul>
        </nav>

        <!-- Main Content -->
        <main class="main-content">
            <div class="page-header">
                <h2>工单管理</h2>
                <div class="header-actions">
                    <button class="btn btn-primary" onclick="showAddWorkOrderModal()">
                        <i class="fas fa-plus"></i> 创建工单
                    </button>
                    <button class="btn btn-info" onclick="showDateRangeModal()">
                        <i class="fas fa-calendar"></i> 日期查询
                    </button>
                    <button class="btn btn-success" onclick="exportWorkOrders()">
                        <i class="fas fa-download"></i> 导出
                    </button>
                </div>
            </div>

            <!-- 搜索和筛选 -->
            <div class="search-bar">
                <div class="search-group">
                    <input type="text" id="workOrderSearch" placeholder="搜索工单编码..." class="form-control">
                    <button class="btn btn-secondary" onclick="searchWorkOrders()">
                        <i class="fas fa-search"></i>
                    </button>
                </div>
                <select id="statusFilter" class="form-control">
                    <option value="">所有状态</option>
                    <option value="PENDING">待处理</option>
                    <option value="IN_PROGRESS">进行中</option>
                    <option value="COMPLETED">已完成</option>
                    <option value="CANCELLED">已取消</option>
                </select>
                <select id="productionLineFilter" class="form-control">
                    <option value="">所有产品线</option>
                    <option value="生产线A">生产线A</option>
                    <option value="生产线B">生产线B</option>
                    <option value="生产线C">生产线C</option>
                </select>
                <select id="productFilter" class="form-control">
                    <option value="">所有产品</option>
                    <!-- 产品选项将动态加载 -->
                </select>
                <button class="btn btn-warning" onclick="clearFilters()">
                    <i class="fas fa-times"></i> 清除筛选
                </button>
            </div>

            <!-- 工单统计 -->
            <div class="workorder-stats">
                <div class="stat-card pending">
                    <div class="stat-icon">
                        <i class="fas fa-clock"></i>
                    </div>
                    <div class="stat-info">
                        <h3 id="pendingCount">0</h3>
                        <p>待处理</p>
                    </div>
                </div>
                <div class="stat-card in-progress">
                    <div class="stat-icon">
                        <i class="fas fa-play"></i>
                    </div>
                    <div class="stat-info">
                        <h3 id="inProgressCount">0</h3>
                        <p>进行中</p>
                    </div>
                </div>
                <div class="stat-card completed">
                    <div class="stat-icon">
                        <i class="fas fa-check"></i>
                    </div>
                    <div class="stat-info">
                        <h3 id="completedCount">0</h3>
                        <p>已完成</p>
                    </div>
                </div>
                <div class="stat-card cancelled">
                    <div class="stat-icon">
                        <i class="fas fa-times"></i>
                    </div>
                    <div class="stat-info">
                        <h3 id="cancelledCount">0</h3>
                        <p>已取消</p>
                    </div>
                </div>
            </div>

            <!-- 工单表格 -->
            <div class="table-container">
                <table class="data-table">
                    <thead>
                        <tr>
                            <th>
                                <input type="checkbox" id="selectAll" onchange="toggleSelectAll()">
                            </th>
                            <th onclick="sortTable('orderCode')">
                                工单编码 <i class="fas fa-sort"></i>
                            </th>
                            <th>产品</th>
                            <th onclick="sortTable('plannedQuantity')">
                                计划数量 <i class="fas fa-sort"></i>
                            </th>
                            <th>完成数量</th>
                            <th>不合格数量</th>
                            <th>进度</th>
                            <th onclick="sortTable('status')">
                                状态 <i class="fas fa-sort"></i>
                            </th>
                            <th>产品线</th>
                            <th onclick="sortTable('plannedStartTime')">
                                计划开始时间 <i class="fas fa-sort"></i>
                            </th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody id="workOrdersTableBody">
                        <tr>
                            <td colspan="11" class="loading">
                                <i class="fas fa-spinner fa-spin"></i>
                                加载中...
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <!-- 分页 -->
            <div class="pagination-container">
                <div class="pagination-info">
                    显示 <span id="pageStart">0</span> - <span id="pageEnd">0</span> 条，
                    共 <span id="totalItems">0</span> 条记录
                </div>
                <div class="pagination">
                    <button class="btn btn-sm btn-secondary" onclick="previousPage()" id="prevBtn">
                        <i class="fas fa-chevron-left"></i> 上一页
                    </button>
                    <span class="page-numbers" id="pageNumbers"></span>
                    <button class="btn btn-sm btn-secondary" onclick="nextPage()" id="nextBtn">
                        下一页 <i class="fas fa-chevron-right"></i>
                    </button>
                </div>
            </div>
        </main>
    </div>

    <!-- 创建/编辑工单模态框 -->
    <div id="workOrderModal" class="modal">
        <div class="modal-content large">
            <div class="modal-header">
                <h3 class="modal-title" id="modalTitle">创建工单</h3>
                <span class="close" onclick="hideModal()">&times;</span>
            </div>
            <form id="workOrderForm">
                <div class="modal-body">
                    <div class="form-row">
                        <div class="form-group">
                            <label class="form-label">工单编码 *</label>
                            <input type="text" class="form-control" name="orderCode" required>
                            <small class="form-help">工单的唯一标识码</small>
                        </div>
                        <div class="form-group">
                            <label class="form-label">产品 *</label>
                            <select class="form-control" name="productId" required>
                                <option value="">请选择产品</option>
                                <!-- 产品选项将动态加载 -->
                            </select>
                        </div>
                    </div>
                    <div class="form-row">
                        <div class="form-group">
                            <label class="form-label">计划数量 *</label>
                            <input type="number" class="form-control" name="plannedQuantity" min="1" required>
                        </div>
                        <div class="form-group">
                            <label class="form-label">产品线 *</label>
                            <select class="form-control" name="productionLine" required>
                                <option value="">请选择产品线</option>
                                <option value="生产线A">生产线A</option>
                                <option value="生产线B">生产线B</option>
                                <option value="生产线C">生产线C</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-row">
                        <div class="form-group">
                            <label class="form-label">计划开始时间</label>
                            <input type="datetime-local" class="form-control" name="plannedStartTime">
                        </div>
                        <div class="form-group">
                            <label class="form-label">计划结束时间</label>
                            <input type="datetime-local" class="form-control" name="plannedEndTime">
                        </div>
                    </div>
                    <div class="form-row">
                        <div class="form-group">
                            <label class="form-label">优先级</label>
                            <select class="form-control" name="priority">
                                <option value="LOW">低</option>
                                <option value="NORMAL" selected>普通</option>
                                <option value="HIGH">高</option>
                                <option value="URGENT">紧急</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label class="form-label">状态</label>
                            <select class="form-control" name="status">
                                <option value="PENDING" selected>待处理</option>
                                <option value="IN_PROGRESS">进行中</option>
                                <option value="COMPLETED">已完成</option>
                                <option value="CANCELLED">已取消</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="form-label">备注</label>
                        <textarea class="form-control" name="remarks" rows="3" placeholder="工单备注信息..."></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" onclick="hideModal()">取消</button>
                    <button type="submit" class="btn btn-primary">
                        <i class="fas fa-save"></i> 保存
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- 工单详情模态框 -->
    <div id="workOrderDetailModal" class="modal">
        <div class="modal-content large">
            <div class="modal-header">
                <h3 class="modal-title">工单详情</h3>
                <span class="close" onclick="hideDetailModal()">&times;</span>
            </div>
            <div class="modal-body" id="workOrderDetailContent">
                <!-- 工单详情内容将在这里动态加载 -->
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" onclick="hideDetailModal()">关闭</button>
                <button type="button" class="btn btn-primary" onclick="editCurrentWorkOrder()">
                    <i class="fas fa-edit"></i> 编辑
                </button>
            </div>
        </div>
    </div>

    <!-- 状态变更模态框 -->
    <div id="statusChangeModal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title">更改工单状态</h3>
                <span class="close" onclick="hideStatusModal()">&times;</span>
            </div>
            <form id="statusChangeForm">
                <div class="modal-body">
                    <div class="form-group">
                        <label class="form-label">选择新状态 *</label>
                        <select class="form-control" name="status" required>
                            <option value="PENDING">待处理</option>
                            <option value="IN_PROGRESS">进行中</option>
                            <option value="COMPLETED">已完成</option>
                            <option value="CANCELLED">已取消</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label class="form-label">变更原因</label>
                        <textarea class="form-control" name="reason" rows="3" placeholder="请输入状态变更原因..."></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" onclick="hideStatusModal()">取消</button>
                    <button type="submit" class="btn btn-warning">
                        <i class="fas fa-sync"></i> 确认更改
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- 日期范围查询模态框 -->
    <div id="dateRangeModal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title">日期范围查询</h3>
                <span class="close" onclick="hideDateRangeModal()">&times;</span>
            </div>
            <form id="dateRangeForm">
                <div class="modal-body">
                    <div class="form-row">
                        <div class="form-group">
                            <label class="form-label">开始日期 *</label>
                            <input type="datetime-local" class="form-control" name="startDate" required>
                        </div>
                        <div class="form-group">
                            <label class="form-label">结束日期 *</label>
                            <input type="datetime-local" class="form-control" name="endDate" required>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="form-label">查询类型</label>
                        <select class="form-control" name="dateType">
                            <option value="planned">计划时间</option>
                            <option value="actual">实际时间</option>
                            <option value="created">创建时间</option>
                        </select>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" onclick="hideDateRangeModal()">取消</button>
                    <button type="submit" class="btn btn-info">
                        <i class="fas fa-search"></i> 查询
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- Toast Notification -->
    <div id="toast" class="toast"></div>

    <script src="js/workorders.js"></script>
</body>
</html>